<template>
  <div>
    <el-dialog
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
        width="800px"
        :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="文章封面">
          <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :http-request="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatars">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="文章标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容">
          <lz-editor :min-height="200" v-model="form.info"></lz-editor>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="onSubmit">立即提交</el-button>
          <el-button @click="handleClose">取消提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {publishForum, updateForum, uploadFile} from "@/api/apiFox";

export default {
  props:['isShow','isEdit','formData'],
  data(){
    return{
      dialogVisible:false,
      imageUrl: '',
      form: {
        title:"",
        avatar:"",
        info:""
      }
    }
  },
  methods:{
    beforeAvatarUpload(file) {
      uploadFile(file).then(res=>{
        console.log(res)
        this.form.avatar = res.data
        this.imageUrl = res.data
      }).catch(err=>{})
    },
    handleClose(){
      this.dialogVisible=false
      for(let key in this.form){
        this.form[key] = ""
      }
      this.imageUrl = ""
      this.$emit('closeForm',true)
    },
    onSubmit() {
      console.log(this.form);
      if (this.form.title===""){
        this.$message.warning('标题必填')
        return
      }
      if (this.form.avatar===""){
        this.$message.warning('封面图必传')
        return
      }
      if (this.form.info===""){
        this.$message.warning('内容必填')
        return
      }
      if (this.isEdit){
        updateForum(this.form).then(res=>{
          this.$message.success('修改成功')
          this.handleClose()
        }).catch(err=>{})
      }else{
        publishForum(this.form).then(res=>{
          this.$message.success('发布成功')
          this.handleClose()
        }).catch(err=>{})
      }

    }
  },
  mounted() {
    if (this.isShow){
      if (this.isEdit){
        this.dialogVisible = true
        this.form = {
          title:this.formData.title,
          avatar:this.formData.avatar,
          info:this.formData.info,
          id:this.formData.id
        }
        this.imageUrl = this.formData.avatar
      }else {
        this.dialogVisible = true
        for(let key in this.form){
          this.form[key] = ""
        }
        this.imageUrl = ""
      }

    }else{
      this.dialogVisible = false
    }
  },

  watch:{
    isShow(newValue,oldValue){
      if (this.isShow){
        if (this.isEdit){
          this.dialogVisible = true
          this.form = this.formData
          this.imageUrl = this.formData.avatar
        }else {
          this.dialogVisible = true
          for(let key in this.form){
            this.form[key] = ""
          }
          this.imageUrl = ""
        }

      }else{
        this.dialogVisible = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep(.el-dialog){
  border-radius: 30px;
}
.avatar-uploader{
  width: 150px;
  height: 150px;
  //border-radius: 50%;
  display: flex;
  align-items: center;
  border: 1px dashed #d9d9d9;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatars {
  width: 150px;
  height: 150px;
  display: block;
}
</style>
